import { defineComponent, h, PropType, ref, watch } from 'vue';
import { Loading } from '@/global';
import styles from '@/pages/MainMenu/common_page.module.scss';
import { ElTable } from 'element-plus';
import { createElTableColumns, TableColumnConfig } from '@/util/vnode_create_util/dynamic_table_column_creator';
import { Page } from '@/config/api_config/api_interface';
import { CommonPagination } from '@/config/component_config/custom_config/bhss_component/pagination/CommonPagination';

/**
 * 页面底部的分页组件
 */
export const PageCommonPagination = defineComponent({
  props: {
    page: {
      type: Object as PropType<Page>,
      default: (): Page => {
        return {
          pageIndex: 1, pageLimit: 10, total: 0
        };
      }
    }
  },
  emits: ['changePage'],
  setup (props, { emit }) {
    const currentPage = ref<number>(props.page?.pageIndex || 1);
    const currentPageSize = ref<number>(props.page?.pageLimit || 10);
    watch(currentPageSize, newVal => {
      // eslint-disable-next-line vue/no-mutating-props
      props.page.pageLimit = newVal;
      // emit('update:page', { showNum: newVal, total: props.page?.total, pageIndex: currentPage.value });
      emit('changePage', null);
    });
    watch(currentPage, newVal => {
      // eslint-disable-next-line vue/no-mutating-props
      props.page.pageIndex = newVal;
      // emit('update:page', { showNum: currentPageSize.value, total: props.page?.total, pageIndex: newVal });
      emit('changePage', null);
    });
    return () => <div class={styles['common-pagination']}>
      <CommonPagination
        total={props.page?.total}
        v-model:currentPage={currentPage.value}
        v-model:currentPageSize={currentPageSize.value}
      >
      </CommonPagination>
    </div>;
  }
});

/**
 * 审核计划中间的表格组件
 */
export const PageCommonDatatable = defineComponent({
  props: {
    data: {
      type: Array,
      default: () => {
      }
    },
    loading: {
      type: Object as PropType<Loading>,
      default: (): Loading => {
        return { status: false };
      }
    },
    defineColumns: {
      type: Array as PropType<TableColumnConfig<any>[]>,
      default: () => {
        return [];
      }
    },
    maxHeight: {
      type: Number,
      default: window.innerHeight - 220
    }
  },
  setup (props) {
    return () => <div class={styles['common-datatable-area']}>
      <ElTable data={props.data} v-loading={props.loading?.status} maxHeight={props.maxHeight}>
        {createElTableColumns(props.defineColumns)}
      </ElTable>
    </div>;
  }
});
